<html>
<head>
    <link rel="stylesheet" href="jstree/themes/default/style.min.css" />
    <script type="application/javascript" src="jquery-2.1.1.min.js"></script>
    <script type="application/javascript" src="jstree/jstree.js"></script>
    <script>
        $(function() {

            $('#jstree1').jstree({
                "core":{
                    "data":[{"id":"0","parent":"#","state":{"disabled":false,"opened":true,"selected":false},"text":"夏宇信息"},{"id":"69","parent":"0","text":"工程"},{"id":"5","parent":"0","text":"行政"},{"id":"71","parent":"0","text":"迷"},{"id":"1","parent":"0","text":"技术"}],
                    "themes" : {
                        "variant" : "large",//加大
                        "ellipsis" : true //文字多时省略
                    },
                    "check_callback" : true
                },
                "plugins" : [ "wholerow","themes"]
            }).on('select_node.jstree', function(event, data) {
                console.log(data.node);
            }).on('changed.jstree', function(event,data) {
                console.log("-----------changed.jstree");
                console.log("action:" + data.action);
                console.log(data.node);
            });

        });


        function create(){
            var ref = $('#jstree1').jstree(true);
            var currNode = _getCurrNode();
            currNode = ref.create_node(currNode, {"type":"file"});
            if(currNode) {
                ref.edit(currNode);
            }
        }

        function rename(){
            var ref = $('#jstree1').jstree(true);
            var currNode = _getCurrNode();
            ref.rename_node(currNode,"rename node222");
        }

        function del(){
            var ref = $('#jstree1').jstree(true);
            var currNode = _getCurrNode();
            ref.delete_node(currNode);
        }

        function moveup(){
            var ref = $('#jstree1').jstree(true);
            var currNode = _getCurrNode();
            var prevNode = ref.get_prev_dom(currNode,true);
            ref.move_node(currNode,prevNode,'before');
        }

        function movedown(){
            var ref = $('#jstree1').jstree(true);
            var currNode = _getCurrNode();
            var nextNode = ref.get_next_dom(currNode,true);//返回兄弟节点的下一个节点
            ref.move_node(currNode,nextNode,'after');
        }

        /**
         *    获取当前所选中的结点
         */
        function _getCurrNode(){
            var ref = $('#jstree1').jstree(true),
                sel = ref.get_selected();
            console.log(sel);
            if(!sel.length) {
                console.log("----");
                return false;
            }
            sel = sel[0];
            return sel;
        }
    </script>
</head>
<body>
<input type="button" value="create node" onclick="create();">
<input type="button" value="rename node" onclick="rename();">
<input type="button" value="del node" onclick="del();">
<input type="button" value="上移" onclick="moveup();">
<input type="button" value="下移" onclick="movedown();">
<div id="jstree1" style="width:200px;background:#fff322"></div>
</body>
</html>